<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card class="form-container" shadow="never">
                    <el-form :model="productBrandFrom"
                             :rules="rules"
                             ref="productCateFrom"
                             label-width="150px">
                        <el-form-item label="品牌名称：" prop="name">
                            <el-input v-model="productBrandFrom.name"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌首字母：" prop="initial">
                        <el-select v-model="value" placeholder="请选择首字母"  @change="getInitial($event)">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.label"
                                   >
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "ProductBrandAdd",
        data(){
            return{
                value:'',
                productTempFrom:{
                    name:'',
                    initial:''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入品牌名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ],
                    initial:[
                        {required: true, message: '请输入品牌首字母', trigger: 'blur'},
                        {min: 1, max: 1, message: '长度为1 个字符', trigger: 'blur'}
                    ],
                },
                options:[
                    {
                        value: '1',
                        label: 'A'
                    },
                    {
                        value: '2',
                        label: 'B'
                    },
                    {
                        value: '3',
                        label: 'C'
                    },
                    {
                        value: '4',
                        label: 'D'
                    },
                    {
                        value: '5',
                        label: 'E'
                    },
                    {
                        value: '6',
                        label: 'F'
                    },
                    {
                        value: '7',
                        label: 'G'
                    },
                    {
                        value: '8',
                        label: 'H'
                    },
                    {
                        value: '9',
                        label: 'I'
                    },
                    {
                        value: '10',
                        label: 'J'
                    },
                    {
                        value: '11',
                        label: 'K'
                    },
                    {
                        value: '12',
                        label: 'L'
                    },
                    {
                        value: '13',
                        label: 'M'
                    },
                    {
                        value: '14',
                        label: 'N'
                    },
                    {
                        value: '15',
                        label: 'O'
                    },
                    {
                        value: '16',
                        label: 'P'
                    },
                    {
                        value: '17',
                        label: 'Q'
                    },
                    {
                        value: '18',
                        label: 'R'
                    },
                    {
                        value: '19',
                        label: 'S'
                    },
                    {
                        value: '20',
                        label: 'T'
                    },
                    {
                        value: '21',
                        label: 'U'
                    },
                    {
                        value: '22',
                        label: 'V'
                    },
                    {
                        value: '23',
                        label: 'W'
                    },
                    {
                        value: '24',
                        label: 'X'
                    },
                    {
                        value: '25',
                        label: 'Y'
                    },
                    {
                        value: '26',
                        label: 'Z'
                    },
                ]

            }
        },
        methods:{
            getInitial(value){
                this.productTempFrom.initial = value;
            },
            onSubmit(){
                console.log(this.productTempFrom.name);
                console.log(this.productTempFrom.initial);
                this.$confirm('是否提交数据', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                this.service.get("/product/manage/productBrand/add.do",{
                    params:{
                        name:this.productTempFrom.name,
                        firstChar:this.productTempFrom.initial
                    }
                }).then(res=>{
                    if (res.data.status==0){
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.$router.push({
                            name:'商品品牌管理'
                        })
                    }else{
                        this.$message.error('添加失败,请重新添加!');
                    }
                })
                })
            }
        }
    }
</script>

<style scoped>

</style>